<template>
  <div class="app-container">
    <el-button type="primary"
               size="small"
               @click="toAdd()"> 添加 </el-button>
    <el-table v-loading="listLoading"
              :data="list"
              element-loading-text="Loading"
              border
              fit
              highlight-current-row>
      <el-table-column align="center"
                       label="序号"
                       width="95">
        <template slot-scope="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="账号"
                       width="110">
        <template slot-scope="scope">
          {{ scope.row.account }}
        </template>
      </el-table-column>

      <el-table-column label="昵称"
                       width="110"
                       align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.nickname }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号"
                       width="110"
                       align="center">
        <template slot-scope="scope">
          {{ scope.row.mobilePhoneNumber }}
        </template>
      </el-table-column>
      <el-table-column label="邮箱"
                       width="110"
                       align="center">
        <template slot-scope="scope">
          {{ scope.row.email }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col"
                       label="状态"
                       width="110"
                       align="center">
        <template slot-scope="scope">
          <el-tag>{{ scope.row.deleted == "0" ? "正常" : "封禁" }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column align="center"
                       label="创建时间"
                       width="200">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.createDate }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center"
                       label="最后一次登录时间"
                       width="200">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.lastLogin }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center"
                       label="操作"
                       width="250">
        <template slot-scope="scope">
          <el-button :type="scope.row.deleted == 0 ? 'danger' : 'warning'"
                     size="small"
                     @click="changeStatus(scope.row.deleted, scope.row.id)">
            {{ scope.row.deleted == 0 ? "封禁" : "解禁" }}
          </el-button>
          <el-button type="primary"
                     size="small"
                     @click="toEdit(scope.row.id)">
            修改
          </el-button>
          <el-button type="danger"
                     size="small"
                     @click="deleteUser(scope.row.id)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import userApi from "@/api/user";
import { parseTime } from "@/utils";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "gray",
        deleted: "danger",
      };
      return statusMap[status];
    },
  },
  inject: ["reload"],
  data() {
    return {
      list: null,
      listLoading: true,
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    changeStatus(status, id) {
      userApi.changeStatus(status, id);
      this.reload();
    },
    deleteUser(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (id == 1 || id == 2 || id == 3) {
            this.$message({
              message: "该用户为预留用户，不可删除",
              type: "warning",
            });
          } else {
            userApi.deleteUser(id);
            this.reload();
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    fetchData() {
      this.listLoading = true;
      userApi.getList().then((response) => {
        this.list = response.data;
        this.listLoading = false;
      });
    },
    toEdit(id) {
      this.$router.push({
        name: "AddUser",
        params: {
          id: id,
          pattern: "edit",
        },
      });
    },
    toAdd() {
      this.$router.push({
        name: "AddUser",
        params: {
          id: 0,
          pattern: "add",
        },
      });
    },
  },
};
</script>
